<template>
  <a-form :form="form" layout="horizontal">
    <a-form-item hidden>
      <a-input v-decorator="['id']"/>
    </a-form-item>
    <a-form-item label="配置键" v-bind="formItemLayout">
      <a-input placeholder="配置键" v-decorator="field('key','配置键')"/>
    </a-form-item>
    <a-form-item label="配置值" v-bind="formItemLayout">
      <a-input placeholder="配置值" v-decorator="field('val','配置值')"/>
    </a-form-item>
    <a-form-item label="配置说明" v-bind="formItemLayout">
      <a-input placeholder="配置说明" v-decorator="field('desc','配置说明',false)"/>
    </a-form-item>
  </a-form>
</template>

<script>

  import {field} from '@/utils/util'
  import {pick} from 'lodash'

  const createCols = ['key', 'val', 'desc']
  const updateCols = ['id', ...createCols]

  export default {

    data() {
      return {
        form: this.$form.createForm(this),
        formItemLayout: {
          labelCol: {span: 5},
          wrapperCol: {span: 14}
        }
      }
    },

    props: {
      mode: {
        type: String,
        required: false,
        default: 'create'
      },
    },

    methods: {
      field,

      setFormData(row) {
        if (this.mode === 'edit') {
          console.log('set from data: %o',row)
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(row, updateCols))
          })
        }

      },

      getFormData() {
        return new Promise((resolve, reject) => {
          this.form.validateFields((err, values) => {
            if (err) {
              reject(err)
            }
            resolve(pick(values, (this.mode === 'create' ? createCols : updateCols)))
          })
        })
      }
    }

  }
</script>

<style lang="less" scoped>
</style>
